<template>
	<view class="content">
		<u-navbar title="选择收货地址" @leftClick="leftClick" :placeholder="true" >
		</u-navbar>
		<view class="search-heder">
			<view class="search-input"  @click="semap">
				<view class="city-text">
					{{addressmini}}<text class="iconfont icon-xiala"></text>
				</view>
				<text style="margin: 0 18rpx;color: #ccc;">|</text>
				<u--input disabled placeholder="请输入你的收货地址" border="none" prefixIcon="search"
					prefixIconStyle="font-size: 48rpx;color: #999" disabledColor="#f2f2f2"></u--input>
			</view>
			<view class="address-item">
				<view>
				<text class="iconfont icon-address"></text>
					{{current}}
				</view>
				<navigator class="textclass" url="../../page_search/mapposition?type=1">重新定位</navigator>
			</view>
		</view>
		<view class="cireceipt">
			<view class="cir-h">
				<view><text class="iconfont icon-dianpu"></text> 收货地址</view>
			</view>
			<view class="cir-list">
			<AddressForm :addressList="addressList"></AddressForm>
			</view>
		</view>
		<view class="nearc">
			<view class="nearc-h">
				<view><text class="iconfont icon-address"></text> 附近地址</view>
			</view>
			<view class="nearc-list">
				<view class="naerc-item" v-for="(item,index) in pois" :key="index">{{item.title}}</view>
			</view>
		</view>
		<view class="footer">
		<u-button type="primary" @click="rightClick"><text>新增地址</text></u-button>
		</view>
	</view>
</template>

<script>
	import addressform from '../component/addressform.vue'
	import qqmap from '../../utils/qqmap.js'
	import http from '@/utils/http.js'
	export default{
		data(){
			return{
				addressmini:'',
				pois:[],
				current:'市中区',
				addressList:[]
			}
		},
		components:{
			AddressForm:addressform
		},
		methods:{
			position(){
				uni.getLocation({
					type:'gcj02',
					isHighAccuracy: true,
					altitude:true,
					success: (res) => {
						this.lat = res.latitude
						this.lng = res.longitude
						qqmap.reverseGeocoder({
						location:{
							latitude:this.lat,
							longitude:this.lng
						},
						get_poi:1,
						 success:(res) =>{
							this.pois = res.result.pois.slice(0,5)
							if(res.result.address_component.street_number != ""){
							this.current = res.result.address_component.district + res.result.address_component.street_number
							}else{
							this.current = res.result.address_component.district + res.result.address_component.street
							}
						  },
						 fail: (error) => {
							 console.error(error);
						   },
						})
					},
					fail: (error) => {
							console.log('获取位置信息失败：', error);
						}
				})
			},
			semap(){
				uni.navigateTo({
					url:'/page_search/mapposition?type=1'
				})
			},
			rightClick(){
				uni.navigateTo({
					url:'/page_my/my-address/addaddress'
				})
			},
			leftClick(){
				this.$bus.$emit('homepost', { param: this.current })
				uni.navigateBack({
					delta:1,
				})
			},
			async getaddlist(){
				const res = await http({
					url:'/user/address'
				})
				this.addressList = res.data
			},
		},
		onShow() {
			this.addressmini = getApp().globalData.addressmini || '内江市'
			this.$bus.$on('backWithParams', params => {
			   const separatorIndex = params.param.indexOf('市');
			   this.current = params.param.substring(separatorIndex + 1);
			})
		},
		onLoad() {
			this.position()
			this.getaddlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}
	.textclass{
		font-size: 24rpx;
		color: #025E21;
		margin-right: 10rpx;
	}
	.search-heder {
		background-color: #fff;
		padding:20rpx 40rpx 30rpx 40rpx;
		.search-input {
			display: flex;
			align-items: center;
			overflow: hidden;
			height: 68rpx;
			flex-shrink: 0;
			border-radius: 40rpx;
			background: #F2F2F2;
			padding-left: 30rpx;
			margin-bottom: 32rpx;
			.city-text{
				font-size: 24rpx;
			}
		}
		.address-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			view{
				font-size: 30rpx;
				.icon-address{
					margin-right: 20rpx;
				}
			}
		}
	}
	.cireceipt{
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx 60rpx 30rpx 40rpx;
		.cir-h{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #999;
			font-size: 30rpx;
			.icon-dianpu{
				color: #999;
				margin-right: 20rpx;
			}
		}
		.cir-list{
			padding-left: 30rpx;
			margin-top: 30rpx;
		}
	}
	.nearc{
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx 60rpx 30rpx 40rpx;
		.nearc-h{
			color: #999;
			font-size: 30rpx;
			.icon-address{
				color: #999;
				margin-right: 20rpx;
			}
		}
		.nearc-list{
			padding-left: 30rpx;
			margin-top: 30rpx;
			.naerc-item{
				padding-bottom: 30rpx;
				border-bottom: 1px dashed #E6E6E6;
				margin-top: 20rpx;
			}
		}
	}
	.footer{
		margin-top: 20rpx;
		padding: 0 40rpx;
	}
</style>